<template>
<div class="welcome">
    <!-- hello，welcome<br />
    神龙教主洪福齐天 -->

    <!-- 轮播图 -->
    <!-- <div class="lbs">
        <swiper :options="swiperOption">
            <swiper-slide class="swiper-slide" v-for="(item,index) in lbs" :key="index">
                <img :src="item"/>
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>   
            <div class="swiper-button-prev" slot="button-prev"></div> 
            <div class="swiper-button-next" slot="button-next"></div> 
        </swiper>
    </div> -->
    <!-- /轮播图 -->

    <!-- four total -->
    <el-row :gutter="20">
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <div class="l">神龙</div>
                <div class="r">
                    <span>教主</span>
                    <span>webopenfather</span>
                </div>
            </div>
        </el-col>
        
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <div class="l">神龙</div>
                <div class="r">
                    <span>教主</span>
                    <span>webopenfather</span>
                </div>
            </div>
        </el-col>
        
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <div class="l">神龙</div>
                <div class="r">
                    <span>教主</span>
                    <span>webopenfather</span>
                </div>
            </div>
        </el-col>
        
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <div class="l">神龙</div>
                <div class="r">
                    <span>教主</span>
                    <span>webopenfather</span>
                </div>
            </div>
        </el-col>
    </el-row>
    <!-- /four total -->

    <!-- order total -->
    <div class="orderEcharts" ref="orderEcharts">
        <!-- 待填充 -->
    </div>
    <!-- /order total -->

    
    
    <!-- echarts total -->
    <div class="echarts-total">
        <div class="echarts goodsTotal"></div>
        <div class="echarts usersAreaTotal"></div>
        <div class="echarts regTotal"></div>
    </div>
    <!-- /echarts total -->
    
</div>
</template>
<script>
export default {
    mounted() {
        this.$nextTick(() => {
            this.drawLine()
        })
    },
    data() {
        return {
            // 轮播图数据
            lbs: [
                'http://upload.mobiletrain.org/2020/0403/1585905306717.jpg',
                'http://upload.mobiletrain.org/2020/0403/1585905306717.jpg',
                'http://upload.mobiletrain.org/2020/0403/1585905306717.jpg',
            ],
            // 轮播图
            swiperOption:
            {
                //显示分页
                pagination: {
                    el: '.swiper-pagination'
                },
                //设置点击箭头
                navigation: {
                    nextEl: '.swiper-button-next', 
                    prevEl: '.swiper-button-prev'
                },
                //自动轮播
                autoplay: {
                    delay: 2000,
                    //当用户滑动图片后继续自动轮播
                    disableOnInteraction: false,
                },
                //开启循环模式
                loop: true
            }
        }
    },
    methods: {
        // 绘图
        drawLine()
        {
            // 以前：获取DOM节点元素
            // 步骤1：给标签增加id属性
            // 步骤2：通过document.qs('')获取
            // 瑕疵：从HTML根节点一层一层找 影响性能  HTML底层渲染回流重绘
            // 解决：通过虚拟DOM 用JS模拟真实的DOM节点
            
            // 现在：
            // 步骤1：给标签增加ref属性
            // 步骤2：通过this.$refs.属性值来获取DOM
            // console.log(this.$refs.orderEcharts)

            // 基于准备好的dom，初始化echarts实例
            // let myChart = this.$echarts.init(document.getElementById('orderEcharts'))
            let myChart = this.$echarts.init(this.$refs.orderEcharts)
            // option
            let option = option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line'
                }]
            };
            // 绘制图表
            myChart.setOption(option);
        }
    }
}
</script>
<style lang="scss" scoped>
// welcome
.welcome {
    width: 96%;
    margin: auto;
    // overflow-y: scroll;

    // echarts-total
    .echarts-total {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 20px;


        .echarts {
            width: 30%; 
            height: 315px;
            background: #fff;
        }
    }

    // 行
    .el-row {
        margin-bottom: 20px;
        &:last-child {
        margin-bottom: 0;
        }
    }
    // 列
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        width: 275px;
        height: 110px;
        background: #fff;
        border-radius: 4px;
        min-height: 36px;
        display: flex;

        .l {
            width: 100%;
            height: 100%;
            background: green;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .r {
            width: 100%;
            height: 100%;
            background: blue;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    // orderEcharts
    .orderEcharts {
        width: 100%;
        height: 300px;
        background: #fff;
        padding-right: 10px;
    }

    // lbs
    .lbs {
        width: 100%;
        height: 100px;
    }
}
</style>